<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">


<div layout:fragment="content">
    <div class="med_tittle_section">
        <div class="med_img_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="med_tittle_cont_wrapper">
                        <div class="med_tittle_cont">
                            <ol class="breadcrumb">
                                <li><a href="index.html">首页</a></li>
                                <li><a th:href="@{/route/routeManageUI}">我的关注</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container">
        <div class="container">
            <div class="row med_toppadder50 med_bottompadder50">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h1>路线管理</h1>
                    <div  style="min-height: 150px"  class="cy-news-grid-item" th:each="userRoute:${userRouteList}">
                        <div class="cy-ib-thumbnail pull-left">
                        </div>
                        <div class="booklet-cont">
                            <h5><a th:href="@{/route/travelRouteDetailsUI(id=${userRoute.travelRoute.id})}"
                                   th:text="'路线预约: ' + ${userRoute.travelRoute.name}"></a></h5>
                            <div class="cy-summary-intro">
                                <p th:text="${userRoute.travelRoute.describe}">
                                </p>
                            </div>
                            <div class="text-right"><a th:onclick="cancelTravelRouteReserve([[${userRoute.travelRoute.id}]])"
                                                       class="btn btn-info btn-sm">取消关注</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script th:src="@{/js/jquery_min.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/wow.min.js}"></script>
        <script th:src="@{/js/custom.js}"></script>
        <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
        <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
        <script th:src="@{/layer/layer.js}"></script>
        <script th:inline="javascript">


            function cancelTravelRouteReserve(id) {
                $.ajax({
                    url: '/travel/route/cancelTravelRouteReserve',
                    data: {"id": id},
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 200) {
                            window.location.reload();
                        } else {
                            layer.open({
                                title: '错误提示',
                                content: result.message
                            });
                        }
                    }
                })
            }

            $('.filter-type-box span a').click(function () {
                if ($(this).hasClass('active'))
                    $(this).removeClass('active')
                else
                    $(this).addClass('active')
            });
            $('.cy-summary-intro p').each(function () {
                var maxwidth = 260;
                var backup = $(this).html();
                var height_lg = $(this).parent().height();
                if ($(this).text().length > maxwidth) {
                    $(this).text($(this).text().substring(0, maxwidth));
                    $(this).html($(this).html() + '...');
                    var backup_1 = $(this).html();
                    var height_sm = $(this).parent().height();
                    $(this).parent().css('height', height_sm);
                }
                var d_value = height_lg - height_sm;
                $(this).next().click(function () {
                    if ($(this).html() == '更多') {
                        $(this).html('收起');
                        $(this).prev().html(backup);
                        $(this).parent().animate({height: '+=' + d_value + 'px'});
                    } else {
                        $(this).html('更多');
                        $(this).prev().html(backup_1);
                        $(this).parent().animate({height: '-=' + d_value + 'px'});
                    }
                })
            });
        </script>
    </div>
</html>
